﻿<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>MiniUI Dragger</title>
	<link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="themes/icon.css">
	<!--EasyUI编辑器配置: <script type="text/javascript" src="jquery.min.js"></script> -->
	<!--EasyUI编辑器配置: <script type="text/javascript" src="jqu
__CreateJSPath = function (js) {
    var path = "scripts/";
    var href = location.href;
    href = href.split("#")[0];
    href = href.split("?")[0];
    var ss = href.split("/");
    ss.length = ss.length - 1;
    href = ss.join("/");
    if (path.indexOf("https:") == -1 && path.indexOf("http:") == -1 && path.indexOf("file:") == -1 && path.indexOf("\/") != 0) {
        path = href + "/" + path;
    }
    return path;
}
var bootPATH = __CreateJSPath("boot.js");
</script>



    .icon-import{
	  background:url('demo/draggable/editorIcons/import.gif') no-repeat center center;
     }
	 .icon-save{
	  background:url('demo/draggable/editorIcons/save_edit.png') no-repeat center center;
     }
	 .icon-save-no{
	  background:url('demo/draggable/editorIcons/save_edit_no.png') no-repeat center center;
     }
     [sid]{border: 1px solid #ccc;position:absolute;}
</style>
<style type="text/css">
    .CodeMirror
    {
    }
    function onSelect1(title,index){
	// design-mode
	if(index==1){
	   selectedTabTitle = "design-mode";
	   var codeEditorCurrText = codeEditor.getValue();
	   if(lastDesignText != codeEditorCurrText){
	   	designRepaint();
	   }
	   lastDesignText = codeEditorCurrText;
	}
	// source
	else if(index==0){
	    selectedTabTitle = "source";
	    if(codeEditor){
	    	lastDesignText = codeEditor.getValue();
	    }
 	    if(currComponent){
		// 切换到代码编辑时，根据SID自动选中代码
	   	var sid = $(currComponent).attr('sid');
	   	codeSelection(sid);= new RegExp("<div [^>]*sid=['\"]"+sid+"['\"][^>]*>","i");
		   if(start_ch1 !=-1){
			startLineNumber = Number(x);
			start_ch = start_ch1;
		   }
		}
		var code = getCode(sid,trx,'div');
		var etx = code.split("\n");
		var endLineNumber = startLineNumber + etx.length - 1; 
		var end_ch = etx[etx.length-1].length;
		codeEditor.setSelection({line:startLineNumber,ch:start_ch},{line:endLineNumber,ch:end_ch});
	    }
    }

    function designRepaint(){
	var codeEditorCurrText = codeEditor.getValue();
	var main = getCode('main',codeEditorCurrText,'div');
	if(!main){
			$('#save').show();$('#nosave').hide();
		}else{
			updSaveStar1("source ");
			$('#nosave').show();$('#save').hide();
		}
    }
    function updSaveStar1(source){
		var p = $('#tab1').tabs().tabs('tabs')[0];
		var mb = p.panel('options').tab.find('a.tabs-inner');
		mb.text(source);
    }
a-options="menu:'#mm1',iconCls:''">File</a>
		<div style="display:none;"><input id="importBtn" class="easyui-filebox" data-options="onChange:importLocalHtml" style="width:50%"/></div>
		<a href="#" onclick=" $('#importBtn').filebox('button').click(); " class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-import'">Import</a>
		<a id="save" href="#" onclick="saveAsLocalHtml('save');" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-save'">Save</a>
		<a id="nosave" href="#" onclick="" class="easyui-linkbutton" style="display:none;" data-options="plain:true,disabled:true,iconCls:'icon-save-no'">Save</a>
		<!-- <a href="#" onclick="" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-import'">Import</a> -->
		<a href="#" onclick="runCode();" class="easyui-linkbutton" style="margin-left:10px;" data-options="plain:false,iconCls:''">RUN the source</a>
		<span style="margin-left:10px;">&nbsp;文件:&nbsp;<a id="fPath" href="#"></a><span>
	</div>
	<div id="tab1" class="easyui-tabs easyui-resizable" data-options="tabWidth:112,onSelect:onSelect1" style="width:100%;height:800px;">
	
		<div title="source *" style="padding:10px;">
			<textarea id="text" ></textarea>
		</div>ent_id="datebox" style="border:1px solid #ccc;width:110px;height:40px;">datebox(可拖拽)</div>
					<div style="height: 5px;"></div>
					<div class="dragitem" component_id="combobox" style="border:1px solid #ccc;width:110px;height:40px;">combobox(可拖拽)</div>
					<div style="height: 5px;"></div>
					<div class="dragitem" component_id="button" style="border:1px solid #ccc;width:110px;height:40px;">按钮</div>
					<div style="height: 5px;"></div>
					<div class="dragitem" component_id="buttonedit" style="border:1px solid #ccc;width:110px;height:40px;">按钮Edit</div>
					<div style="height: 5px;"></div>
					<div class="dragitem" component_id="tree" style="border:1px solid #ccc;width:110px;height:40px;">tree</div>
					<div style="height: 5px;"></div>
					<div class="dragitem" component_id="textbox" style="border:1px solid #ccc;width:110px;height:40px;">输入框(可拖拽)</div>	
				</div>
				</div>
				<div id="EditDiv"  sid="main" style="position:relative;border:1px solid #ccc;" data-options="region:'center',title:'EditDiv'">
				</div>
			</div>
		</div>
	</div>
	
	<!-- 1、拖拽器 -->
	<script type="text/javascript">
					editorCachePush();
					codeEditor.setValue( removeCode($(currComponent).attr("sid"),codeEditor.getValue()) );//删除代码
					$(currComponent).remove();//删除组件
				}
			});
			// 全局 Ctrl+S 保存
			$(document).keydown(function(e){
				if(e.keyCode==83&&e.ctrlKey){
					saveAsLocalHtml("save");
				}
			});
			// 设计区undo操作CTRL+Z
			$(document).keydown(function(e){
				if(e.keyCode==90 && e.ctrlKey && selectedTabTitle=="design-mode"){
					codeEditor.undo();
					designRepaint();
				}
			});

			$("#EditDiv").keydown(function(e){
				if (e.keyCode==37) timedMove(e.keyCode);//左 
				else if (e.keyCode==38) timedMove(e.keyCode);//上
 				else if (e.keyCode==39) timedMove(e.keyCode);//右 
				else if (e.keyCode==40) timedMove(e.keyCode);//
			codeEditor = CodeMirror.fromTextArea($("#text")[0], { mode: "text/html", tabMode: "indent",onChange:updSaveStar, height: "100%", width: "100%" });

			// 初始化可拖拽代理区
			$('.dragitem').draggable({
				 revert:true,
				 deltaX:2,
				 deltaY:2,
				 proxy:function(source){
					 var n = $('<div style="position:absolute;border:solid 1px #ccc;"></div>');
					// var com = n.html("sssss").appendTo('body');
					// $.parser.parse(com[0]);
					 component_id = $(source).attr('component_id');
					 var com = n.html($.ajax({url:"demo/draggable/"+component_id+".html",async:false}).responseText).appendTo('body');
					 $.parser.parse(com[0]);
					 return proxy=n;
				 },
				 onStopDrag:function(e){
					// 当代理拖拽停止时,将拖动的组件添加到编辑区
			 });
		});
		
	
		/**容器的边界，
		 *	如果脱离，则选择到达的最小容器作为其新父容器
		 */
				codeEditor.setValue( upSizeCode($(d.target).attr('sid'),width,height,codeEditor.getValue()) );
			}catch(e){alert('upSizeCode:'+e)}
		}
		}
		
		/* 停止移动 */
		function stopMove(){
		   clearTimeout(t);
		   
		   if(currComponent){
		     try{
			  codeEditor.setValue( upPosCode($(currComponent).attr('sid'),currComponent.style.left,currComponent.style.top, codeEditor.getValue() ) );
		     }catch(e){alert('upPosCode:'+e)}
		   }
		}

		
		/** 
		  *	返回最小包含父容器方法
		  * 查看target元素落在了什么容器范围之内,如果多个容器范围都包含它则取小的那一个容器.
		  * @target 拖动元素
		  * @containers 用于寻找是否位置包含拖动元素target位置的容器集合
		  * @return 返回最小(宽度最小)包含父容器
			}
			}
		</script> -->